<template>
    <div>
        <div class="table-operator">
            <a-button @click="addRow">
                {{$ti18('rxList.add','新增')}}
            </a-button>
            <a-button @click="removeRow">
                {{$ti18('rxList.delBtn','删除')}}
            </a-button>
            <a-button @click="upRow">
                {{i18n('isButton.upward','向上')}}
            </a-button>
            <a-button @click="downRow">
                {{i18n('isButton.downward','向下')}}
            </a-button>
        </div>
        <rx-grid
            style="min-height: 250px"
            ref="table_columnConf"
            :dataSource="dataSource"
            :allowRowSelect="true"
            :multiSelect="true"
            :showPage="false"
            :bordered="true"
            :columns="columns"
        >
            <div  slot="fieldKey" slot-scope="{ text, record,index }">
                <a-select v-model="record.fieldKey" allowClear :options="fieldColumns" @change="fieldKeyChange($event,record)"></a-select>
            </div>
            <div  slot="fieldName" slot-scope="{ text, record,index }">
                <a-input v-model="record.fieldName"></a-input>
            </div>

        </rx-grid>
    </div>
</template>

<script>
import {BaseList, Util} from "@lowcode/jpaas-common-lib";

export default {
    name: 'FormCalendarViewGrid',
    mixins: [BaseList],
    props: {
        fieldColumns: {
            type: Array,
            default: []
        },
        viewColumns: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            columns: [
                {
                    title:this.i18n('form.field','字段'),
                    dataIndex: 'fieldKey',
                    scopedSlots: {customRender: 'fieldKey'},
                    width: 500
                },
                {
                    title: this.i18n('form.columnName','列名'),
                    dataIndex: 'fieldName',
                    scopedSlots: {customRender: 'fieldName'},
                    width: 500
                }

            ],
            dataSource:this.viewColumns
        }
    },
    created(){
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"FormCalendarView",key);
        },
        addRow(){
            this.dataSource.push({
                idx_: Util.randomId(),
                fieldKey: "",
                fieldName: "",
            });
        },
        removeRow(){
            var table=this.$refs.table_columnConf;
            table.removeRows();
            table.selectedRowKeys=[];
            table.selectedRows=[];
            this.$forceUpdate();
        },
        upRow() {
            this.$refs.table_columnConf.moveUp();
        },
        downRow() {
            this.$refs.table_columnConf.moveDown();
        },
        fieldKeyChange(value,record){
            var fieldColumn= this.fieldColumns.find(item=>item.value==value);
            if(fieldColumn){
                record.fieldName=fieldColumn.label;
            }
        }
    },
    watch:{
        viewColumns:{
            handler(o,_o){
                this.dataSource = o;
            },
            deep:true
        }
    }
}
</script>
<style scoped>

</style>

